<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title>index</title>
  <script src="js/jquery-1.11.3.js"></script>
  <style>
    .score {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .score li {
      display: inline-block;
      width: 50px;
      height: 50px;
      border: 1px solid #f00;
      border-radius: 50%;
      cursor: pointer;
    }
  </style>
</head>

<body>

  <h3>请打分</h3>
  <ul class="score">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>

  <script>
    //获得当前单击的li在所有li中的位置i,i及其执行的都变为红色，i之后的都变为白色
    var $lis = $(".score>li");
    $lis.click(function () {
      // var index = $(this).index();
      var index = $lis.index(this);
      console.log(index);
      // $lis.each(function (i) {
      //    $(this).css("background-color", "white");
      //    if (i <= index) {
      //       $(this).css("background-color", "yellow");
      //    }
      // })
      $(`.score>li:lt(${index+1})`).css("background-color", "yellow");
      $(`.score>li:gt(${index})`).css("background-color", "white");
    });
  </script>
</body>

</html>